<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>编辑围观详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody apply-box-left-from">
        <el-form label-width="100px" ref="editForm">
          <el-form-item label="围观主题：">
            <el-input v-model="infoForm.title" placeholder="围观主题" size="small"></el-input>
          </el-form-item>
          <el-form-item label="围观类型：">
            <el-select v-model="infoForm.cate_id" placeholder="请选择">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示范围：">
            <el-select v-model="infoForm.type" placeholder="请选择" @change="sectionChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="infoForm.type=='1'?'展示年段：':'展示班级：'" v-if="infoForm.type=='1' || infoForm.type=='2'">
            <el-cascader
              :props="props"
              v-model="selectId"
              class="adress-cascader"
              placeholder="选择年段/班级"
              ref="select"
              @change="handleDep()"
              v-if="showcascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="截止时间：">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="infoForm.end_time"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="展示星期：">
            <el-select v-model="infoForm.show_week" placeholder="请选择" multiple style="width: 100%">
              <el-option
                v-for="item in week"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示图：">
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$uploadImg"
                accept="image/jpg,image/jpeg,image/png,video/mp4"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <div v-if="infoForm.pic">
                  <img v-if="infoForm.pic.indexOf('mp4') == -1" :src="`${infoForm.pic}`" class="avatar" width="350" height="150">
                  <video v-if="infoForm.pic.indexOf('mp4') != -1" :src="`${infoForm.pic}`" controls class="videoBox"></video>
                </div>

                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button size="mini" plain @click="detelFn()">删除</el-button>
            </div>
          </el-form-item>
          <el-form-item label="内容：">
            <el-input
              type="textarea"
              placeholder="内容"
              v-model="infoForm.body"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 6, maxRows: 8 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
        <el-button @click.native="saveProjectsFn()" size="small" type="primary" plain>确定并保存</el-button>
      </div>
    </div>
    <singleTeacherModle :visible.sync="uservisible" @studentFn="getUser"></singleTeacherModle>
  </div>
</template>

<script>
import {show_add, show_detail, show_edit, show_category_index} from "@/api/admin/school"
import {sectionIndex, classIndex} from "@/api/admin/class"

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      infoForm: {
        cate_id: '', // 分类id
        type: '0', // 来源类型0全校1年段2班级
        show_section: '', // 显示班级多个逗号隔开，全校给0
        show_class: '', // 显示班级多个逗号隔开，全校给0
        show_week: [], // 显示星期多个逗号隔开1-7
        title: '', // 标题
        pic: '', // 缩略图
        body: '', // 内容
        end_time: '', // 截止日期2024-03-15
      },
      userData: null,
      uservisible: false,
      options: [{
        value: '0',
        label: '全校'
      }, {
        value: '1',
        label: '年段'
      }, {
        value: '2',
        label: '班级'
      }],
      week: [{
        value: '1',
        label: '星期一'
      }, {
        value: '2',
        label: '星期二'
      }, {
        value: '3',
        label: '星期三'
      },
        {
          value: '4',
          label: '星期四'
        }, {
          value: '5',
          label: '星期五'
        }, {
          value: '6',
          label: '星期六'
        }, {
          value: '7',
          label: '星期日'
        }],
      props: {
        lazy: true,
        label: 'name',
        value: 'id',
        lazyLoad: this.lazyLoad
      },
      selectId: [],
      showcascader: false,
      categoryList: [],
      classId: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.showcascader = true
        if (this.detailId) {
          this.getDetail()
        }
        this.showcategoryFn()
      } else {
        this.infoForm = {
          cate_id: '', // 分类id
          type: '0', // 来源类型0全校1年段2班级
          show_section: '', // 显示班级多个逗号隔开，全校给0
          show_class: '', // 显示班级多个逗号隔开，全校给0
          show_week: [], // 显示星期多个逗号隔开1-7
          title: '', // 标题
          pic: '', // 缩略图
          body: '', // 内容
          end_time: '', // 截止日期2024-03-15
        }
        this.selectId = []
        this.showcascader = false
      }
    }
  },
  created() {

  },
  methods: {
    showcategoryFn() {
      show_category_index({p: 1}).then(res => {
        this.categoryList = res.list.data
      })
    },
    lazyLoad(node, resolve) {
      this.sendCityFn(node, resolve)
    },
    async sendCityFn(node, resolve) {
      if (node.level !== 3) {
        // sectionIndex, classIndex
        let res = '';
        let list = []
        if (node.level == 0) {
          res = await sectionIndex();
        } else {
          res = await classIndex({section_id: node.value});
        }
        for (let item of res.list.data) {
          let data_ = {
            id: item.id
          }
          if (node.level == 0) {
            data_.name = item.section_name
            if (this.infoForm.type == '1') {
              data_.leaf = true
            }
          }
          if (this.infoForm.type == '2' && node.level == 1) {
            data_.name = item.class_name
            data_.leaf = true
          }
          list.push(data_)
        }
        resolve(list)
      }
    },
    async handleDep() {
      let id_ = this.$refs.select.getCheckedNodes()[0].path
      // let name_ = this.$refs.select.getCheckedNodes()[0].pathLabels
      // 年段需要获取班级信息
      if (this.infoForm.type == '1') {
        this.infoForm.show_section = id_[0]
        let res = await classIndex({section_id: id_[0]});
        let class_id = []
        for (let item of res.list.data) {
          class_id.push(item.id)
        }
        this.infoForm.show_class = class_id.join(',')
        console.log('infoForm==>', this.infoForm)
      }
      if (this.infoForm.type == '2') {
        this.infoForm.show_section = id_[0]
        this.infoForm.show_class = id_[1]
      }
    },
    sectionChange() {
      let that = this
      this.selectId = []
      this.showcascader = false
      this.infoForm.show_section = ''
      this.infoForm.show_class = ''
      setTimeout(() => {
        that.showcascader = true
      }, 100)
    },
    getDetail() {
      show_detail({id: this.detailId}).then(res => {
        console.log('res:', res)
        if (res.vo.type == 1) {
          this.selectId = [Number(res.vo.show_section)]
        }
        if (res.vo.type == 2) {
          this.selectId = [Number(res.vo.show_section), Number(res.vo.show_class)]
        }
        this.infoForm.cate_id = res.vo.cate_id // 分类id
        this.infoForm.type = res.vo.type.toString() // 来源类型0全校1年段2班级
        this.infoForm.show_section = res.vo.show_section // 显示班级多个逗号隔开，全校给0
        this.infoForm.show_class = res.vo.show_class // 显示班级多个逗号隔开，全校给0
        this.infoForm.show_week = res.vo.show_week.split(',') // 显示星期多个逗号隔开1-7
        this.infoForm.title = res.vo.title // 标题
        this.infoForm.pic = res.vo.pic// 缩略图
        this.infoForm.body = res.vo.body// 内容
        this.infoForm.end_time = res.vo.end_time

      })
    },
    saveProjectsFn() {
      let data_ = JSON.parse(JSON.stringify(this.infoForm))
      // if (!data_.title) {
      //   this.$message.error('填写活动名称')
      //   return
      // }
      // if (!data_.time) {
      //   this.$message.error('选择活动时间')
      //   return
      // }
      // if (!data_.style.length) {
      //   this.$message.error('选择参与人员身份')
      //   return
      // }
      // if (!this.userData) {
      //   this.$message.error('选择活动负责人')
      //   return
      // }
      // if (!data_.description) {
      //   this.$message.error('填写活动简介')
      //   return
      // }
      // // let state =1
      // // if(state){
      // //   return
      // // }
      // data_.start_time = data_.time[0] + ' 00:00:00'
      // data_.end_time = data_.time[1] + ' 23:59:59'
      // delete data_.time
      // data_.style = data_.style.join(',')
      // data_.user_id = this.userData.id
      if(data_.pic.indexOf('mp4') != -1){
        data_.is_video = 1
      }else{
        data_.is_video = 0
      }
      data_.show_week = data_.show_week.join(',')
      // let status = 1
      // if (status) {
      //   return
      // }
      if (this.detailId) {
        data_.id = this.detailId
        show_edit(data_).then(res => {
          console.log('res:', res)
          this.$message.success(res.msg)
          this.$emit('InitFn')
          this.closePOpup()
        })
      } else {
        show_add(data_).then(res => {
          console.log('res:', res)
          this.$message.success(res.msg)
          this.$emit('InitFn')
          this.closePOpup()
        })
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    getUser(option) {
      console.log('option:', option)
      this.userData = JSON.parse(JSON.stringify(option))
    },
    handleAvatarSuccess(res) {
      console.log('res347:', res)
      this.infoForm.pic = res.data.name
    },
    beforeAvatarUpload(file) {
      console.log(file)
    },
    detelFn() {
      this.infoForm.pic = ''
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 700px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}
.videoBox{
  width: 350px;
  height: 150px;
}
</style>


